<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>请假信息管理系统 -- 课程信息管理</title>
    <script src="../../../js/jquery.min.js"></script>
    <link href="../../../css/courseManage/courseManage1.css" rel="stylesheet">
    <link href="../../../css/common/common.css" rel="stylesheet">
</head>
<body>
<!-- 顶部弹出提示信息容器 -->
<!--蓝色提示成功信息-->
<div id="notificationBlue" class="notificationBlue">
    <span id="messageBlue"></span>
</div>
<!--灰色提示普通信息-->
<div id="notificationGrey" class="notificationGrey">
    <span id="messageGrey"></span>
</div>
<!--黄色色提示警告信息-->
<div id="notificationYellow" class="notificationYellow">
    <span id="messageYellow"></span>
</div>
<!-- 头部 -->
<head th:insert="~{common/common::header}">
</head>
<!-- 左边 -->
<aside th:insert="~{common/common::aside}">
</aside>
<!-- 中间 -->
<main class="main">
    <div class="box">
        <div class="search-container">
            课程编号：<input type="text" class="search-box" placeholder="搜索..." id="searchCourseID">
            课程名称：<input type="text" class="search-box" placeholder="搜索..." id="searchCourseName">
            学年：<input type="text" class="search-box" placeholder="搜索..." id="searchYear">

            学期：<label id="searchTerm">
            上<input type="radio" value="0" name="term" id="radioFirst">
            下<input type="radio" value="1" name="term" id="radioSecond">
            </label>&nbsp;&nbsp;
            <button class="search-button action-button" onclick="searchCourse()">搜索</button>
            <button class="reset-button action-button" onclick="reset()">重置</button>
        </div>
        <div>
            <button class="add-button action-button"  onclick="addCourseInfo()">新增课程信息+</button>
            <button class="delete-button action-button"  onclick="deleteCourseIds()">批量删除</button>
        </div>
        <table>
            <thead>
            <tr>
                <th><input type="checkbox" id="selectAllCheckbox"></th>
                <th>课程编号</th>
                <th>班级名称</th>
                <th>课程名称</th>
                <th>学年</th>
                <th>学期</th>
                <th>学时</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="course,courses:${pageVo.list}">
                <td><input type="checkbox" th:value="${course.courseID}"></td>
                <td th:text="${course.courseID}">数据1</td>
                <td th:text="${course.className}">数据2</td>
                <td th:text="${course.courseName}">数据3</td>
                <td th:text="${course.year}">数据4</td>
                <td th:if="${course.term} == '0' " th:text="上学期">数据5</td>
                <td th:if="${course.term} == '1' " th:text="下学期">数据5</td>
                <td th:text="${course.hour}">数据6</td>
                <td class="action-buttons">
                    <button id="editButton" class="action-button edit-button" th:onclick="editCoursePage('[(${course.courseID})]') " >编辑</button>
                    <button id="deleteButton" class="action-button delete-button" th:onclick="deleteCourse('[(${course.courseID})]')">删除</button>
                </td>
            </tr>
            </tbody>
        </table>

        <div class="pagination">
            <span th:text="'共'+${pageVo.getTotal()}+'条'"></span>
            <span class="page-link" id="beforePage" onclick="beforeChangePage()"> 上一页 </span>
            <span th:text="'页号：'+${pageVo.getPageNum()}"></span>
            <span class="page-link" id="afterPage" onclick="afterChangePage()"> 下一页 </span>
        </div>
    </div>
</main>
</body>

<script th:inline="javascript" type="text/javascript">
    // 获取全选复选框和所有行的复选框
    const selectAllCheckbox = document.getElementById("selectAllCheckbox");
    const checkboxes = document.querySelectorAll("tbody input[type='checkbox']");
    var courseIds = [];
    // 添加点击事件监听器来处理全选/取消全选
    selectAllCheckbox.addEventListener("click", function () {
        courseIds = [];
        checkboxes.forEach((checkbox) => {
            checkbox.checked = selectAllCheckbox.checked;
            console.log(checkbox.checked)
            if(selectAllCheckbox.checked){
                courseIds.push(checkbox.value);
            }
        });
        if(!selectAllCheckbox.checked){
            courseIds = [];
        }
    });

    checkboxes.forEach(checkbox => {
        checkbox.addEventListener("change", function (event) {
            if (event.target.checked) {
                courseIds.push(event.target.value)
            } else {
                courseIds.splice(event.target.value,1);
            }
        });
    });

    function showNotification(id) {
        const notification = document.getElementById(id);
        notification.classList.add("show");

        setTimeout(function() {
            notification.classList.remove("show");
        }, 2000); // 3秒后自动消失
    }

    function addCourseInfo(){
        window.location.href = '/course/addCoursePage'
    }

    var messageInfo = [[${resultInfo?.message}]];
    if(messageInfo != null){
        document.getElementById("messageBlue").innerHTML = messageInfo;
        this.showNotification("notificationBlue");
    }

    var pageNum = [[${pageVo.getPageNum()}]];
    var pageSum = [[${pageVo.pages}]]
    if(pageNum === 1){
        document.getElementById("beforePage").style.display = 'none';
    }
    if(pageNum === pageSum || pageSum === 0){
        document.getElementById("afterPage").style.display = 'none';
    }

    function beforeChangePage(){
        pageNum = pageNum - 1;
        window.location.href = '/course/list?pageNum='+pageNum+'&pageSize=7';
    }

    function afterChangePage(){
        pageNum = pageNum + 1;
        window.location.href = '/course/list?pageNum='+pageNum+'&pageSize=7';
    }

    function deleteCourse(courseId){
        if(confirm("确定要删除id为"+courseId+"的课程信息吗？")){
            window.location.href = '/course/deleteCourseOne?depId='+courseId;
        } else {
            document.getElementById("messageGrey").innerHTML = "取消删除";
            this.showNotification("messageGrey");
        }

    }

    function outLogin(){
        location.href = '/outLogin'
    }

    function editCoursePage(courseId){
        window.location.href = '/course/updateCoursePage?courseId=' + courseId;
    }

    function deleteCourseIds(){
        window.location.href = '/course/deleteCourses?ids='+courseIds;
    }

    let searchTerm = "";
    document.addEventListener('DOMContentLoaded', function () {
        const radioFirst = document.getElementById('radioFirst');
        const radioSecond = document.getElementById('radioSecond');
        radioFirst.addEventListener('change', function () {
            searchTerm = this.value;
        });
        radioSecond.addEventListener('change', function () {
            searchTerm = this.value;
        });
    });

    function searchCourse(){
        let searchCourseId = document.getElementById("searchCourseID").value;
        let searchCourseName = document.getElementById("searchCourseName").value;
        let searchYear = document.getElementById("searchYear").value;
        window.location.href = '/course/list?pageNum=1&pageSize=7&=courseID'+searchCourseId
                                +'&courseName='+searchCourseName+'&year='+searchYear+'&term='+searchTerm
    }

    function reset(){
        document.getElementById("searchCourseID").value = "";
        document.getElementById("searchCourseName").value = "";
        document.getElementById("searchYear").value = "";
        document.getElementById("radioFirst").checked = false;
        document.getElementById("radioSecond").checked = false;
        searchTerm="";
    }
</script>

</html>